<template>
  <a-button :type="type" ref="btn">
    <slot></slot>
  </a-button>
</template>

<script>
export default {
  props: {
    type: { type: String, default: 'default' },
  },
  mounted() {
    this.selectBtnClass()
  },
  methods: {
    selectBtnClass() {
      let btn = this.$refs['btn']
      if (btn) {
        switch (this.type) {
          case 'warning':
            btn.$el.classList.add('btn-warning')
            break
          case 'success':
            btn.$el.classList.add('btn-success')
            break
          case 'info':
            btn.$el.classList.add('btn-info')
            break
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.ant-btn {
  margin: 10px !important;
}
.btn-warning {
  background-color: orange;
  color: white;
}
.btn-warning:hover {
  background-color: white;
  border-color: orange;
  color: orange;
}

.btn-success {
  background-color: green;
  color: white;
}
.btn-success:hover {
  border-color: green;
  background-color: white;
  color: green;
}
.btn-info {
  background-color: #7ba5e7;
  color: white;
}
.btn-info:hover {
  border-color: #7ba5e7;
  background-color: white;
  color: #7ba5e7;
}
</style>